<!--
 * @Description: 监测月报
 * @Author: Ronda
 * @Date: 2022-02-16 09:30:08
<<<<<<< HEAD
 * @LastEditors: 宋佳馨 song2005315@qq.com
 * @LastEditTime: 2025-09-26 09:57:02
-->
<template>
  <div>
    <el-row>
      <el-col :span="4">
        <div class="tree">
          <!-- 关键字过滤输入框 -->
          <el-input
            placeholder="输入关键字进行过滤"
            v-model="filterText"
            class="tree-filter-input"
          ></el-input>
          <!-- 树形组件 -->
          <el-tree
            @node-click="handlerClick"
            class="filter-tree"
            :data="EngData"
            :props="defaultProps"
            :filter-node-method="filterNode"
            ref="tree"
          >
          </el-tree>
        </div>
      </el-col>
      <el-col :span="20">
        <!-- 年月选择器 + 搜索按钮组合 -->
        <div class="search-header">
          <el-date-picker
            v-model="dateVal"
            type="month"
            placeholder="选择月"
            value-format="yyyy-MM"
            class="month-picker"
            @change="toSearch"
          ></el-date-picker>
          <el-button type="success" @click="toSearch">搜索</el-button>
        </div>
        <!-- 设备选中时显示表格区域 -->
        <div v-if="params.device_id" class="table-area">
          <!-- 表格标题行 -->
          <div class="table-header">
            <span>日期</span>
            <span>tsp</span>
            <span>pm10</span>
            <span>pm2.5</span>
            <span>温度</span>
            <span>湿度</span>
            <span>风向</span>
            <span>风速</span>
            <el-button type="success" class="download-btn">下载</el-button>
          </div>
          <!-- 表格数据区域 -->
          <el-table :data="monitorData" style="width: 100%;margin-top: 10px;">
            <el-table-column prop="insert_time" label="日期" width="180" align="center">
              <template v-slot="scope">
                <div>{{ scope.row.insert_time | fmtDate }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="tsp" label="tsp" width="180"></el-table-column>
            <el-table-column prop="pm10" label="pm10"></el-table-column>
            <el-table-column prop="pm25" label="pm2.5"></el-table-column>
            <el-table-column prop="temperature" label="温度"></el-table-column>
            <el-table-column prop="humidity" label="湿度"></el-table-column>
            <el-table-column prop="wind_direction" label="风向"></el-table-column>
            <el-table-column prop="wind_speed" label="风速"></el-table-column>
          </el-table>
        </div>
        <!-- 无设备选中时的提示 -->
        <div v-else style="line-height: 50px;color: red;font-size: 20px;text-align: center;">请点击设备查看数据</div>
      </el-col>
    </el-row>
  </div>
=======
 * @LastEditors: 崔凤瑶 167839439@qq.com
 * @LastEditTime: 2025-09-26 15:12:13
-->
<template>
    <div>
        <el-col :span="4">
            <div class="tree">
                <el-input placeholder="输入关键字进行过滤" v-model="filterText" size="mini">
                </el-input>
                <el-tree @node-click="handlerClick" class="filter-tree" :data="treeData" :props="defaultProps"
                    default-expand-all:filter-node-method="filterNode" ref="tree">
                    <!-- :props="defaultProps" 是用于配置树形节点属性映射的关键设置。如何解析数据源（这里是 EngData）中的字段： -->
                </el-tree>
            </div>

        </el-col>
        <el-col :span="20">
            <div v-if='params.device_id' class="table">
                <el-form :inline="true">
                    <el-form-item>
                        <div class="block">
                            <span class="demonstration"></span>
                            <el-date-picker value-format="yyyy-MM" v-model="form.data" type="month" placeholder="选择月">
                            </el-date-picker>
                        </div>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon='el-icon-zoom-in' @click="toSearch">搜索</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon='el-icon-zoom-in' align="right">下载</el-button>
                    </el-form-item>
                </el-form>
                <!-- 表格 -->
                <el-table :data="monitorData" style="width: 100%">
                    <el-table-column prop="insert_time" label="日期" width="180" align="center">
                        <template v-slot="scope">
                            <div>
                                {{ scope.row.insert_time | fmtDate }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="tsp" label="tsp" width="180">
                    </el-table-column>
                    <el-table-column prop="pm10" label="pm10">
                    </el-table-column>
                    <el-table-column prop="pm25" label="pm2.5">
                    </el-table-column>
                    <el-table-column prop="temperature" label="温度">
                    </el-table-column>
                    <el-table-column prop="humidity" label="湿度">
                    </el-table-column>
                    <el-table-column prop="wind_direction" label="风向">
                    </el-table-column>
                    <el-table-column prop="wind_speed" label="风速">
                    </el-table-column>
                </el-table>
            </div>
            <div v-else style="line-height: 50px;font-size: 20px;text-align: center;">请点击设备查看数据</div>

        </el-col>
    </div>
>>>>>>> 1576b6416372d97f4d59de56fc7f862b4da9250b
</template>
<script>
<<<<<<< HEAD
import { get } from '@/utils/request'
export default {
  data() {
    return {
      filterText: '', // 树形节点过滤关键字
      dateVal: '',    // 年月选择器绑定值
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      monitorData: [],
      EngData: [],
      params: {
        page: 1,
        pageSize: 10,
        device_id: 0,
        engineer_id: 0,
        month: ''     // 传递选中的年月参数
      }
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val); // 树形节点关键字过滤
    },
    dateVal(val) {
      this.params.month = val;     // 年月参数同步
    }
  },
  methods: {
    handlerClick(val, node) {
      if (!val.children) {
        this.params.device_id = val.id;
        this.params.engineer_id = val.engineer_id;
        this.getMonitor();
      }
    },
    toSearch() {
      this.params.page = 1;
      this.getMonitor();
    },
    async getMonitor() {
      let temp = {
        ...this.params,
        ...(this.params.month && { month: this.params.month })
      };
      let res = await get('/monitor/pageQuery', temp);
      this.monitorData = res.data.list;
    },
    async getEngDevData() {
      let res = await get('/engineer/findEngineerDeviceTree');
      this.EngData = res.data;
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1; // 树形节点模糊匹配
    }
  },
  created() {
    this.getEngDevData();
  },
  filters: {
    fmtDate(val) {
      if (!val) return '';
      const date = new Date(val);
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
    }
  }
}
</script>
<style lang="scss" scoped>
.tree {
  height: calc(100vh - 60px);
  padding-right: 10px;
  border-right: 1px solid #ececec;
  margin-right: 10px;
}
/* 树形过滤输入框样式 */
.tree-filter-input {
  margin-bottom: 10px;
  width: 100%;
}
/* 右侧搜索区样式 */
.search-header {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
  align-items: center;
}
.month-picker {
  width: 140px; 
}
/* 表格标题行样式 */
.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 15px;
  background-color: #f5f7fa;
  border: 1px solid #ebeef5;
  border-radius: 4px 4px 0 0;
}
.table-header span {
  flex: 1;
  text-align: center;
}
/* 下载按钮样式 */
.download-btn {
  width: 80px;
=======
import { get } from '@/utils/request';
export default {
    data() {
        return {
            filterText: '',
            treeData: [],
            defaultProps: {
                children: 'children',
                label: 'name'
            },
            value2: '',
            monitorData: [],
            params: {
                page: 1,
                pageSize: 10,
                device_id: 0,
                engineer_id: 0
            },
            form: { data: [] },

        }
    },
    watch: {
        //监听用户输入框输入的值并进行过滤
        filterText(val) {
            this.$refs.tree.filter(val);
        }
    },
    computed: {},
    methods: {
        //搜索
        toSearch() {
            this.params.page = 1;
            this.getMonitor();

        },
        //点击节点触发
        handlerClick(val, node) {
            console.log(val, node, '点击事件')
            //判断点击的是设备 将设备id 工程id page pageSize传给后端
            if (!val.children) {
                this.params.device_id = val.id;
                this.params.engineer_id = val.engineer_id;
                this.getMonitor();
            }

        },
        async getTreeData() {
            // /engineer/findEngineerDeviceTree'
            let res = await get('/engineer/findEngineerDeviceTree');
            console.log(res, 'history');
            this.treeData = res.data;
        },
        filterNode(value, data) {
            //data是树形结构的数据
            if (!value) return true;
            //value 输入框输入的值
            //返回就是包含输入框关键字的label(节点)
            return data.name.indexOf(value) !== -1;
        },
        //封装方法获取监测历史数据
        async getMonitor() {
            let temp = {
                ...this.params

            };
            //如果传了时间
            if (this.form.data) {
                temp.date = this.form.date;
            }
            let res = await get('/monitor/pageQuery', temp);
            console.log(res, '监控月报');
            this.monitorData = res.data.list;
        },
    },
    created() {
        this.getTreeData();
        this.getMonitor();
    },
    mounted() { },
};
</script>
<style scoped>
.tree {
    height: calc(100vh - 60px);
    padding-right: 10px;
    border-right: 1px solid #ececec;

    padding-top: 10px;
    /* 增加顶部内边距，使搜索框与上方元素（若有）或顶部边框产生间隔 */
}

.block {
    padding-left: 10px;
    padding-right: 20px;

>>>>>>> 1576b6416372d97f4d59de56fc7f862b4da9250b
}
</style>